<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>

	</title>
    <style>
        .music-item {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .music-item img {
            max-width: 100px;
            margin-right: 20px;
        }
        .music-item button {
            margin-top: 10px;
        }

        /* 添加播放控制栏样式 */
        #playerControls {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
        }
        input[type=range] {
            width: 100px;
        }
    </style>
</head>
<body>
    <h1>波d音乐</h1>
    <div>
        <input type="text" id="searchInput" placeholder="Enter song name">
        <button onclick="search()">Search</button>
    </div>

    <div id="music-list"></div>

    <!-- 添加播放控制栏 -->
    <div id="playerControls">
        <button id="playBtn">播放</button>
        <button id="pauseBtn">暂停</button>
        <input type="range" id="volumeCtrl" min="0" max="1" step="0.1" value="1">
        <progress id="progressBar" max="100" value="0"></progress>
    </div>

    <!-- 添加音频元素到DOM，用于全局控制 -->
    <audio id="audioPlayer" style="display:none;"></audio>

    <script>
        // 发送HTTP请求的函数
        function fetchMusicData(keyword) {
            const apiUrl = `http://www.dreamling.top/API/kugou/android_lite/music/api.php?keyword=${encodeURIComponent(keyword)}&n=1&page=1&pagenum=10&br=&format=json&flag=format`;
            const proxyUrl = 'https://api.allorigins.win/raw?url='; // 使用 https://api.allorigins.win/ 作为代理

            fetch(proxyUrl + encodeURIComponent(apiUrl))
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        displayMusicDetails(data.data);
                    } else {
                        console.error('Failed to fetch data:', data);
                    }
                })
                .catch(error => console.error('Error:', error));
        }

        // 展示音乐详情的函数
        function displayMusicDetails(music) {
            const musicListElement = document.getElementById('music-list');
            musicListElement.innerHTML = '';  // 清空之前的内容

            const musicItem = document.createElement('div');
            musicItem.className = 'music-item';

            const musicInfo = document.createElement('div');
            musicInfo.innerHTML = `
                <h2>${music.SongName}</h2>
                <p>Artist: ${music.SingerName}</p>
                <p>Bitrate: ${music.bitrate}</p>
                <p>File Size: ${music.filesize.size} ${music.filesize.unit[0]}</p>
                <p>Duration: ${music.musicduration} seconds</p>
                <p>Pay: ${music.pay ? 'Yes' : 'No'}</p>
                <p><strong>Actions:</strong></p>
            `;

            const playButton = document.createElement('button');
            playButton.textContent = 'Play Music';
            playButton.onclick = function() {
                playMusic(music.url[0]); // 播放第一个URL的音乐
            };

            const downloadButton = document.createElement('button');
            downloadButton.textContent = 'Download';
            downloadButton.onclick = function() {
                downloadMusic(music.url[1]); // 下载第二个URL的音乐
            };

            musicInfo.appendChild(playButton);
            musicInfo.appendChild(downloadButton);

            musicItem.appendChild(musicInfo);

            musicListElement.appendChild(musicItem);
        }

        // 播放音乐
        function playMusic(url) {
            // 创建音乐播放器
            const audio = new Audio(url);
            audio.play();
        }

        // 下载音乐
        function downloadMusic(url) {
            // 创建一个隐藏的链接并点击它以下载音乐
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', '');
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        // 搜索歌曲
        function search() {
            const searchTerm = document.getElementById('searchInput').value.trim();
            if (searchTerm !== '') {
                fetchMusicData(searchTerm);
            } else {
                alert('Please enter a song name');
            }
        }

        // 初始化音频元素引用
        const audioPlayer = document.getElementById('audioPlayer');

        // 播放音乐函数，增加进度条和音量控制逻辑
        function playMusic(url) {
            audioPlayer.src = url;
            audioPlayer.load(); // 加载音频资源
            audioPlayer.play();

            // 绑定事件监听器
            audioPlayer.addEventListener('timeupdate', updateProgress);
            audioPlayer.addEventListener('ended', stopAudio);
            volumeCtrl.addEventListener('input', setVolume);
        }

        // 更新进度条的函数
        function updateProgress() {
            const percent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
            progressBar.value = percent;
        }

        // 设置音量的函数
        function setVolume() {
            audioPlayer.volume = volumeCtrl.value;
        }

        // 暂停音乐函数
        function pauseAudio() {
            audioPlayer.pause();
        }

        // 停止音乐并重置进度条
        function stopAudio() {
            audioPlayer.pause();
            audioPlayer.currentTime = 0;
            progressBar.value = 0;
        }

        // 绑定播放和暂停按钮事件
        document.getElementById('playBtn').addEventListener('click', function() {
            if (!audioPlayer.paused) {
                pauseAudio();
            } else {
                playMusic(audioPlayer.src); // 重新播放当前音频
            }
        });
        document.getElementById('pauseBtn').addEventListener('click', pauseAudio);
    </script>
</body>
</html>
